<style lang="less"></style>
<template>
  <div>
    <Modal
      :title="modalTitle"
      v-model="modalVisible"
      :mask-closable="false"
      :width="500"
      :styles="{ top: '100px' }"
      @on-cancel="hideModal"
    >
      <Form ref="frameForm" :model="frameForm" :label-width="140" :rules="rulesForm">
        <Form-item label="机架名称" prop="frameName">
          <Input
            type="text"
            v-model="frameForm.frameName"
            clearable
            placeholder="请输入机架名称"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="机架描述" prop="detail">
          <Input
            type="text"
            v-model="frameForm.detail"
            :max="1"
            clearable
            placeholder="请输入机架描述"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="机架层数（8-20）" prop="layer">
          <InputNumber
            v-model="frameForm.layer"
            clearable
            placeholder="请输入机架层数"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="机架高度（m）" prop="height">
          <InputNumber
            v-model="frameForm.height"
            clearable
            placeholder="请输入机架高度"
            style="width: 300px;"
          />
        </Form-item>
        <!-- <Form-item label="行号" prop="row">
          <InputNumber v-model="frameForm.row" clearable placeholder="请输入行号" style="width: 300px;" />
        </Form-item>

        <Form-item label="列号" prop="col">
          <InputNumber v-model="frameForm.col" clearable placeholder="请输入列号" style="width: 300px;" />
        </Form-item>-->
        <Form-item label="供应商" prop="supplier">
          <Input
            type="text"
            v-model="frameForm.supplier"
            clearable
            placeholder="请输入供应商"
            style="width: 300px;"
          />
        </Form-item>
        <Form-item label="备注" prop="remark">
          <Input
            type="textarea"
            v-model="frameForm.remark"
            clearable
            placeholder="请输入备注"
            style="width: 300px;"
          />
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="text" @click="hideModal">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getFrameInfo, addFrame, editFrame } from "@/api/device";

import util from "@/libs/util.js";

export default {
  name: "frame-form",
  components: {},
  props: {
    frameModalVisible: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    modalType: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    equipmentroomId: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    frameId: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },

  data() {
    return {
      modalVisible: false,

      frameForm: {
        frameId: "",
        frameName: "",
        layer: "",
        detail: "",
        height: "",
        row: "",
        lat: "",
        lng: "",
        col: "",
        supplier: "",
        remark: ""
      },
      rulesForm: {
        frameName: [
          {
            required: true,
            message: "机架名称不能为空",
            trigger: "blur"
          }
        ],
        detail: [
          {
            required: true,
            message: "机架描述不能为空",
            trigger: "blur"
          }
        ],
        layer: [
          {
            required: true,
            message: "机架层数不能为空,8到20层",
            trigger: "blur",
            type: "integer",
            max: 20,
            min: 8
          }
        ],
        height: [
          {
            required: true,
            message: "机架高度不能为空",
            trigger: "blur",
            type: "number"
          }
        ]
        // row: [
        //   {
        //     required: true,
        //     message: "机架行号不能为空",
        //     trigger: "blur",
        //     type: "integer"
        //   }
        // ],
        // col: [
        //   {
        //     required: true,
        //     message: "机架列号不能为空",
        //     trigger: "blur",
        //     type: "integer"
        //   }
        // ]
      },
      submitLoading: false
    };
  },
  computed: {
    modalTitle() {
      return this.modalType == 0 ? "添加机架" : "修改机架";
    }
  },
  watch: {
    frameModalVisible(newVal, oldVal) {
      if (newVal) {
        this.modalVisible = newVal;

        if (this.modalType == 1) {
          this.edit();
        } else {
          this.add();
        }
      }
    }
  },
  methods: {
    init() {},
    add() {
      this.$refs.frameForm.resetFields();
      this.frameForm.equipmentroomId = this.equipmentroomId;
    },
    edit() {
      this.$refs.frameForm.resetFields();
      getFrameInfo({ frameId: this.frameId }).then(
        res => {
          if (res.code == 0) {
            this.frameForm = res.data;
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    },

    /**
     * 提交新增Frame
     * @param newForm
     */
    submit() {
      if (this.modalType == 0) {
        this.$refs.frameForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.frameForm);
            console.log("submit", obj);
            addFrame(this.frameForm).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("新增成功");
                  this.hideModal();
                  this.$emit("updateDeviceTree");
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      } else {
        this.$refs.frameForm.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            let obj = util.deepClone(this.frameForm);
            editFrame(obj).then(
              res => {
                this.submitLoading = false;
                if (res.code == 0) {
                  this.$Message.success("编辑成功");
                  this.$emit("updateDeviceTree");
                  this.hideModal();
                }
              },
              error => {
                console.log("submit error", JSON.stringify(error));
              }
            );
          }
        });
      }
    },
    hideModal() {
      this.modalVisible = false;
      this.$emit("hideFrameModal");
    }
  },
  mounted() {
    this.init();
  }
};
</script>
